<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标库</title>
    <!-- https://fontawesome.com.cn/faicons 图库网址 -->
    <link rel="stylesheet" href="../../css/reset.css"> <!-- 清除浏览器默认样式 -->
    <link rel="stylesheet" href="/fonts/fontawesome-free-6.4.0-web/css/all.css"> <!-- css图标库 -->
    <link rel="stylesheet" href="/css/public.css">
    <style>
        .div_a{
            width: 100%;
            height: 200px;
            position: relative;
            outline: 1px solid red;
        }
        .fa_ul{
            height: fit-content; /* 按内容自动适配高度 */
            width: fit-content;  /* 按内容自动适配宽度 */
            position: absolute;left: 0px;right: 0px; top: 0px; bottom: 0px;margin: auto; /*上下左右居中*/
        }
        .fa_ul li{
            font-size: 12px;
            /* float: left; */
            padding: 0 0 0 20px;
        }
        .fa_ul li span{
            padding: 0 0 0 3px;
            font: bold italic 12px/14px '华文行楷', Courier, monospace; /*  加粗 倾斜 字体大小/行高 字体类型,简写方式*/
            font-weight: 100; /*字体加粗(100-900) 9个选择越大越粗*/
            font-style: italic; /*normal(正常)、italic倾斜*/
        }

        /* 通过伪类设置Unicode编码图标、参考网址：https://fontawesome.com/search, 样式分析all.css里面属性 */
        .fa_ul li::before{
            content: '\e2eb';  /*图标编码 */
            font-family: 'Font Awesome 6 Free'; /*字体 再all.css里面查找具体应该采用的字体*/
            font-weight: 900;   /*字体加粗、再all.css里面查找具体的数值*/
            vertical-align: top;
        }

    </style>
</head>
<body>
    <i class="fas fa-spinner fa-pulse"></i><span>转圈</span>
        <i class="fas fa-check-square"></i><span>对钩</span>
        <i class="fas fa-camera fa-1x"></i><span>相机</span><!-- fa-1x、fa-2x。。。fa-10x -->
        <i class="fas fa-file-video"></i><span>录像</span>
        <i class="fa-solid fa-download"></i><span>下载</span>
        <i class="fa-solid fa-paw" style="color: blue;"></i><span>熊爪</span>

        <span class="fa-solid">&#xe2eb;</span><span>米饭1</span> <!-- 通过实体来使用图标字体：&#x图标编码 -->
        <i class="fa-solid fa-bowl-rice"></i><span>米饭2</span> <!-- 通过class方式获取图标、这里是通过伪类进行设置进去的 -->
    <div class="div_a">
        <ul class="fa_ul clearfix" >
            <li><span>锄禾日当午</span></li>
            <li><span>汗滴禾下土</span></li>
            <li><span>谁知盘中餐</span></li>
            <li><span>粒粒皆辛苦</span></li> 
        </ul>
    </div>
</body>
</html>